<template>
	<van-popup
		v-model="popShow"
		position="bottom"
		:close-on-click-overlay="false"
		:close-on-popstate="true"
		style="height: 100%; overflow-y: hidden; z-index: 3000"
	>
		<div class="service-content">
			<div class="ser-title d-flex">
				<div class="el-icon-arrow-left back" @click="goBack"></div>
				<div class="tit">选择服务</div>
			</div>
			<div class="search-tab">
				<van-tabs
					v-model="tabActive"
					title-active-color="#156DFF"
					color="#156DFF"
					@change="firstChange"
					v-if="serviceData.length > 1"
				>
					<van-tab
						v-for="(item, index) in serviceData"
						:key="index"
						:title="item.cname"
					/>
				</van-tabs>
				<van-search v-model="keyword" placeholder="请输入服务名称" shape="round" />
			</div>
			<div
				class="cate-content flex"
				:style="{
					height: serviceData.length > 1 ? 'calc(100% - 4.3rem)' : 'calc(100% - 3.42rem)'
				}"
			>
				<ul class="cate-scroll-l" v-if="serviceList.length">
					<li
						class="menu d-flex"
						:class="current == index ? 'menu d-flex active' : ''"
						v-for="(item, index) in serviceList"
						:key="index"
						@click="leftTab(index)"
					>
						{{ item.cname }}
					</li>
				</ul>
				<div class="scroll">
					<template v-if="serviceList[current]">
						<keep-alive>
							<ul class="cate-scroll-r">
								<template v-if="serviceList[current].items.length">
									<template v-for="(item, index) in serviceList[current].items">
										<template
											v-if="
												item.status == 1 && item.si_name.includes(keyword)
											"
										>
											<li
												class="project-item d-flex"
												:key="index"
												@click="changeChecked(item)"
											>
												<div class="thumb">
													<!-- <img :src="item.picture_url" alt="" /> -->
													<cl-avatar
														:src="item.picture_url"
														shape="square"
													/>
												</div>
												<div class="pri-tit">
													<div class="name eli">{{ item.si_name }}</div>
													<div class="price eli">￥{{ item.price }}</div>
												</div>
												<div class="checked d-flex">
													<van-checkbox
														v-model="item.checked"
														checked-color="#156DFF"
													/>
												</div>
											</li>
										</template>
									</template>
								</template>
								<template v-else>
									<cl-empty />
								</template>
							</ul>
						</keep-alive>
					</template>
				</div>
			</div>
			<div class="nextBtn">
				<div class="btn" @click="selectSure">
					已选{{ selectServiceList.length }}项，下一步
				</div>
			</div>
		</div>
	</van-popup>
</template>

<script>
import { Popup, Tab, Tabs, Search, Checkbox } from "vant";
export default {
	components: {
		VanPopup: Popup,
		VanTab: Tab,
		VanTabs: Tabs,
		VanSearch: Search,
		VanCheckbox: Checkbox
	},
	props: {
		biz_id: {
			type: [Number, String],
			default: ""
		},
		items: Array
	},
	data() {
		return {
			popShow: false,
			tabActive: 0,
			current: 0,
			keyword: "",
			//待服务项目
			serviceData: [],
			// 一级选中
			serviceLevel1: "",
			// 选中的服务列表
			selectServiceList: [],
			modifyHtmlFontSize: false,

			callbackFn: null,
			open_biz_id: null
		};
	},
	computed: {
		serviceList() {
			const { serviceData, serviceLevel1 } = this;
			return serviceData[serviceLevel1 || 0]?.childlist ?? [];
		},
		selectServiceIds() {
			return this.selectServiceList.map(v => v.si_id);
		}
	},
	methods: {
		open(biz_id = null, itemsData = null, callback = null) {
			const htmlDom = document.getElementsByTagName('html')[0]
			if (!htmlDom.style.fontSize || htmlDom.style.fontSize == '') {
				htmlDom.style.fontSize = '52px'
				this.modifyHtmlFontSize = true
			}

			this.popShow = true;
			if (itemsData) {
				this.selectServiceList = [...itemsData];
			} else {
				this.selectServiceList = [...this.items];
			}
			this.keyword = "";
			this.current = 0;
			this.serviceData.length && (this.serviceLevel1 = 0);
			this.getList();

			callback && (this.callbackFn = callback)
			biz_id && (this.open_biz_id = biz_id)
		},
		//一级tab
		firstChange(e, f) {
			this.current = 0;
			this.serviceLevel1 = e;
		},
		// 左侧tab
		leftTab(idx) {
			if (this.current == idx) return;
			this.current = idx;
		},
		async getList(callback) {
			const data = await this.$service.public.serviceGetTypeSons({
				type: 1,
				biz_id: this.open_biz_id || this.biz_id,
				search: this.keyword
			});
			data.map(v => {
				if (v.childlist.length) {
					v.childlist.map(cv => {
						if (cv.items.length) {
							cv.items.map(sv => {
								sv.checked = this.selectServiceIds.includes(sv.si_id);
							});
						}
					});
				}
			});
			!this.serviceLevel1 && (this.serviceLevel1 = 0);
			this.serviceData = data;
			callback && callback();
		},
		changeChecked(item) {
			item.checked = !item.checked;
			if (item.checked && !this.selectServiceIds.includes(item.si_id)) {
				this.selectServiceList.push(item);
				return;
			}
			if (!item.checked) {
				let idx = this.selectServiceIds.findIndex(v => v == item.si_id);
				if (idx >= 0) {
					this.selectServiceList.splice(idx, 1);
					return;
				}
			}
		},
		selectSure() {
			this.selectServiceList.map(v => {
				v.is_presents = 0;
				v.is_experience = 0;
			});
			this.$emit("changeSelect", this.selectServiceList);
			this.callbackFn && this.callbackFn(this.selectServiceList)
			// this.callbackFn(this.selectServiceList)
			this.goBack()
		},
		goBack() {
			this.resizeFont()
			this.popShow = false;
		},
		resizeFont() {
			if (this.modifyHtmlFontSize) {
				setTimeout(() => {
					const htmlDom = document.getElementsByTagName('html')[0]
					htmlDom.style.fontSize = ''
				}, 50)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
ul,
li {
	list-style: none;
	box-sizing: border-box;
}
.d-flex {
	display: flex;
}
img[src=""],
img:not([src]) {
	opacity: 0;
}
.service-content {
	width: 7.5rem;
	height: 100%;
	flex-direction: column;
	.ser-title {
		height: 0.88rem;
		align-items: center;
		padding: 0 0.3rem;
		.back {
			width: 0.3rem;
			height: 0.3rem;
			font-size: 0.36rem;
			color: #333;
			font-weight: bold;
		}
		.tit {
			flex: 1;
			font-size: 0.32rem;
			font-weight: bold;
			text-align: center;
			color: #333333;
			padding-right: 0.3rem;
		}
	}
	.search-tab {
		border-bottom: 1px solid #dfdfdf;
	}
	.cate-content {
		flex: 1;
		// height: calc(100% - 4.3rem);
		.scroll {
			flex: 1;
			height: 100%;
			overflow: auto;
			&::-webkit-scrollbar {
				display: none;
			}
		}
		.cate-scroll-l {
			width: 2rem;
			height: 100%;
			background: #f3f3f3;
			.menu {
				width: 100%;
				height: 1.1rem;
				font-size: 0.24rem;
				color: #444;
				font-weight: 400;
				justify-content: center;
				align-items: center;
				&.active {
					background: #fff;
					position: relative;
					&::before {
						content: "";
						position: absolute;
						position: absolute;
						border-left: 0.08rem solid #156DFF;
						height: 0.32rem;
						left: 0;
						top: 0.38rem;
					}
				}
			}
		}
		.cate-scroll-r {
			flex: 1;
			padding: 0 0.16rem;
			.project-item {
				padding: 0.3rem 0;
				border-bottom: 1px solid #dfdfdf;
				&:last-child {
					border-bottom: 0;
				}
				.thumb {
					width: 0.9rem;
					height: 0.9rem;
					border-radius: 0.1rem;
					overflow: hidden;
					margin-right: 0.2rem;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.pri-tit {
					flex: 1;
					.name {
						min-height: 0.6rem;
						font-size: 0.3rem;
						font-weight: bold;
						color: #343434;
						line-height: 0.5rem;
					}
					.price {
						height: 0.22rem;
						font-size: 0.24rem;
						font-weight: bold;
						color: #eb436f;
						line-height: 0.24rem;
					}
				}
				.checked {
					width: 0.6rem;
					align-items: center;
				}
			}
		}
	}
	.nextBtn {
		padding: 0.3rem 0.4rem;
		background: #ffffff;
		box-shadow: 0 -0.08rem 0.2rem 1px #efefef;
		.btn {
			height: 0.8rem;
			width: 100%;
			background: #156DFF;
			font-size: 0.3rem;
			color: #fff;
			text-align: center;
			line-height: 0.8rem;
			border-radius: 0.1rem;
		}
	}
}
.eli {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
::v-deep {
	.van-popup {
		overflow-y: hidden !important;
	}
}
</style>
